<template>
	<view class="container">
		<view
			class="group mb20 backf p20"
			v-for="(group, index) in formList.list"
			:key="index"
			v-show="group.items.length > 0 && group.id > 0"
		>
			<view class="group-title mb40 pl20">{{ group.name }}</view>
			<view class="group-container flex-start flex-wrap">
				<view
					class="group-item df fdc ac w25 mb30"
					v-for="(item, inx) in group.items"
					:key="inx"
					@click="enterItem(item)"
				>
					<view
						class="background-icon"
						:style="'background: ' + item.logo.background"
					>
						<!-- <uni-icons custom-prefix="iconfont" :type="`${item.logo.icon.slice(2)}`" size="34" ></uni-icons> -->
					</view>
					<view class="item-name">{{ item }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			formList: {
				list: [],
			},
			actives: [],
		}
	},
	onShow() {
		this.getGroupModels()
	},
	methods: {
		getGroupModels() {
			uni.showLoading({
				title: '加载中...',
			})
			this.$request
				.request('wflow/wflow/model/list/byUser', {
					data: {},
				})
				.then((rsp) => {
					uni.hideLoading()
					this.formList.list = rsp
					this.formList.list.forEach((group) => {
						this.actives.push(group.name)
						group.items.forEach((item) => {
							item.logo = JSON.parse(item.logo)
						})
					})
				})
		},
		enterItem(row) {
			uni.navigateTo({
				url: `/subPackagesIndex/pages/index/approval/launchApproval?code=${row.formId}`,
			})
		},
	},
}
</script>
<style scoped lang="scss">
.container {
	padding: 10rpx 0rpx;
	min-height: 100vh;
	font-size: 36rpx;
	background-color: #f5f5f5;
}
.background-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 10rpx;
}
.item-name {
	font-size: 28rpx;
	color: #303133;
	max-width: 80px;
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
